Vue.js学习笔记

v-bind

绑定属性，代码：

v-bind:href
v-bind:src
v-bind:class

var app3 = new Vue({
    el: '#app3',
    data: {
        target_location: 'https://baidu.com',
        target_name: '百度一下',
        img_location: '../img/bing-0615.jpeg',
        isActive: true
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-bind的使用</title>
    <style>
        .active {
            background-color: #00b3ee;
        }
    </style>
</head>
<body>

<div id="app3">
    跳转到 <a v-bind:href="target_location" target="_blank">{{target_name}}</a><br>
    <a :class="{active: isActive}">Click me!</a>
    图片：
    <img alt="沙丘上的日落" v-bind:src="img_location"/>
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

v-on

绑定动作：代码

v-on.prevent

var app4 = new Vue({
    el: '#app4',
    data: {},
    methods: {
        onEnter: function () {
            console.log("mouse enter");
        },
        onLeave: function () {
            console.log("mouse leave");
        },
        onSubmit: function () {
            console.log("已经提交！");
        }
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on的使用</title>
</head>
<body>

<div id="app4">

    <form @keyup.enter="onEnter" v-on:submit.prevent="onSubmit">
        <!-- prevent：抑制默认行为 -->
        <input type="text"/>
        <button type="submit">提交</button>
    </form>

    <button v-on="{mouseenter: onEnter, mouseleave: onLeave}">测试按钮</button>
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

v-model

绑定数据：

v-model.trim
v-model.number
v-model.lazy
input
select
textarea

var app5 = new Vue({
    el: '#app5',
    data: {
        name: 'wang',
        price: 22,
        sex: 'M',
        hobby: [],
        from:1
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model的使用</title>
</head>
<body>

<div id="app5">
    <input type="text" v-model.trim="name"><br>
    <pre>{{name}}</pre>
    <span>{{name}}</span>

    <input type="text" v-model.number="price"><br>
    <span>{{price}}</span>

    男
    <input v-model="sex" value="F" type="radio">
    女
    <input v-model="sex" value="M" type="radio">\
    {{sex}}

    男
    <input v-model="hobby" value="F" type="checkbox">
    女
    <input v-model="hobby" value="M" type="checkbox">\
    {{hobby}}

    <br>

    <textarea></textarea>

    <select v-model="from" multiple>
        <option value="1">第一</option>
        <option value="2">第二</option>
    </select>
    {{from}}
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

》》》Vue.js表单输入绑定

流程控制和计算属性

v-if
v-else-if
v-else
computed

var app7 = new Vue({
    el: '#app7',
    data: {
        role: 'hr-min',
        math: 90,
        Chinese: 100,
        English: 80,
    },
    computed: {
        sum: function () {
            return this.math + this.Chinese + this.English;
        },
        average: function () {
            return Math.round(this.sum / 3);
        }
    }
});

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js流程控制</title>
</head>
<body>

<div id="app7">
    <div v-if="role == 'admin'">
        管理员你好！
    </div>
    <div v-else-if="role == 'hr' || role == 'hr-min'">
        人事你好！
    </div>
    <div v-else>
        当前角色没有访问权限！
    </div>

    <br>

    <table border="1">
        <thead>
        <tr>
            <td>学科</td>
            <td>成绩</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>数学</td>
            <td><input type="text" v-model.number="math"></td>
        </tr>
        <tr>
            <td>语文</td>
            <td><input type="text" v-model.number="Chinese"></td>
        </tr>
        <tr>
            <td>英语</td>
            <td><input type="text" v-model.numer="English"></td>
        </tr>
        <tr>
            <td>总分</td>
            <td>{{sum}}</td>
        </tr>
        <tr>
            <td>平均分</td>
            <td>{{average}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="../lib/vue.js"></script>
<script src="../js/main.js"></script>
</body>
</html>

Vue.js学习笔记

v-bind

v-on

v-model

流程控制和计算属性

KannaMakino

引用和评论

吐槽一下sg的产品经理

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据